<template>

<el-dialog
    :title="$t('merchant.link_out_merchant')"
    v-bind="$attrs"
    @close="handleClose"
    @open="handelOpen"
  >
    <div>
      <el-form
        @submit.prevent.native
        label-position="top"
        :model="form"
        ref="mrchForm"
        :rules="rules"
      >
        <el-form-item
          :label="$t('merchant.channel') + ':'"
          prop="channel"
        >

 
            
            <el-select v-model="form.channel" filterable
            style="width: 100%"
            
            :placeholder="$t('merchant.channel')">
            <el-option
              v-for="item in channelMap"
              :key="item.value"
              :label="$t(item.label)"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('merchant.out_mrch_no') + ':'"
          prop="outerMrchNo"
        >
          <el-input
            maxlength="32"
            show-word-limit
            v-model="form.outerMrchNo"
            @blur="() => (form.outerMrchNo = form.outerMrchNo.trim())"
            :placeholder="$t('merchant.out_mrch_no')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('merchant.out_mrch_name') + ':'"
          prop="outerMrchName"
        >
          <el-input
            maxlength="128"
            show-word-limit
            v-model="form.outerMrchName"
            @blur="() => (form.outerMrchName = form.outerMrchName.trim())"
            :placeholder="$t('merchant.out_mrch_name')"
          ></el-input>
        </el-form-item>

      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">
          {{ $t('page.cancel') }}
        </el-button>
        <el-button type="primary" :loading="confirmLoading" @click="saveMrch">{{
          $t('common.confirm')
        }}</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script>
import {newLinkOuterMerchant} from '@/api/merchant'


export default {
  props:{
    mrchId:{
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {
        channel: 'UNION_PAY',
        outerMrchNo: '',
        outerMrchName: ''
      },
      channelMap: [
        {
          label: 'merchant.channels.union_pay',
          value: 'UNION_PAY'
        }
      ],
      confirmLoading: false
    }
  },
  computed: {
    rules() {
      return {
        channel: [
          {
            required: true,
            message: this.$t('merchant.channel_require'),
            trigger: 'blur'
          }
        ],
        outerMrchNo: [
        {
            required: true,
            message: this.$t('merchant.outter_mrch_no_require'),
            trigger: 'blur'
          }
        ],
        outerMrchName: [
        {
            required: true,
            message: this.$t('merchant.outter_mrch_name_require'),
            trigger: 'blur'
          }
        ]

      }
    }
  },
  methods: {
    
    handleClose() {
      this.$emit('update:model-value', false)
    },
    handelOpen() {
      this.$refs['mrchForm'].resetFields()
      },
    
    saveMrch() {
     
      this.$refs['mrchForm'].validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          newLinkOuterMerchant(this.mrchId, this.form)
            .then((res) => {
              this.confirmLoading = false
              this.$message({
                message: 'Create Success',
                type: 'success'
              })
              this.$emit('refresh')
              this.handleClose()
            })
            .catch((e) => {
              this.confirmLoading = false
              this.$confirmError(e)
            })
        }
      })
    },
  }
}

</script>

<style lang="scss" scoped>

</style>
